<template lang="pug">
  div#Achievements
    div.top-header
      i.iconfont.icon-fanhui(@click="$router.push('/wode')")
      span.top-header-title 我的成就
    div.achievements-block
      div.ach-list(v-for="item in achData")
        div.ach-img
          img(src="../assets/achievements/ach-img.png")
        div.ach-info
          div.ach-title {{item.taskTitle}}
          div.ach-text 完成{{item.taskTarget}}任务
        i.iconfont.icon-fenxiang
</template>
<script>
  export default {
    data() {
      return {
        achData: [{
          taskTitle: '里程碑',
          taskTarget: '一周'
        }, {
          taskTitle: '里程碑',
          taskTarget: '一周'
        }]
      }
    }
  }
</script>
<style scoped lang="less">
  #Achievements {
    .achievements-block {
      margin-top: 5px;
      .ach-list {
        padding: 10px 20px;
        background: #fff;
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
        .ach-img {
          float: left;
          height: 60px;
          width: 60px;
          img {
            width: 100%;
            display: block;
          }
        }
        .ach-info {
          text-align: left;
          float: left;
          margin-left: 10px;
          .ach-title {
            font-size: 16px;
            line-height: 30px;
          }
          .ach-text {
            font-size: 12px;
            line-height: 30px;
            color: #9c9c9c;
          }
        }
        .icon-fenxiang {
          float: right;
          color: #9c9c9c;
          line-height: 60px;
        }
      }
    }
  }
</style>
